<template>
  <section>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="物流公司" name="1">
        <el-row>
          <el-button @click="addcomp('adds')">添加物流</el-button>
        </el-row>
        <el-table :data="addcompform" style="width: 100%">
          <el-table-column type="index"  label="序号"> </el-table-column>
          <el-table-column  prop="logcompany" label="物流公司名称" width="180"> </el-table-column>
          <el-table-column prop="phoneNum" label="联系电话" width="180"> </el-table-column>
          <!--<el-table-column prop="address" label="状态"> </el-table-column>-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="editcomp('edit', scope.row)">修改</el-button>
              <!--<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">冻结</el-button>-->
              <el-button size="mini" type="danger" @click="delcomp(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog title="" :visible.sync="dialogFormVisible">

          <el-form ref="compform" :rules="rules" :model="compform" label-width="110px">
            <el-form-item label="快递公司"  prop="logcompany">
              <el-input v-model="compform.logcompany"  type="text"></el-input>
            </el-form-item>
            <el-form-item label="快递公司电话" prop="phoneNum">
              <el-input v-model="compform.phoneNum" ></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addlogcompany">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>

      <el-tab-pane label="配送员" name="2">
        <el-row>
          <el-button @click="addcouriers('adds')">添加配送员</el-button>
        </el-row>
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
          <el-table-column type="index"  label="序号"> </el-table-column>
          <!--<el-table-column  prop="company" label="快递公司" width="180"> </el-table-column>-->
          <el-table-column  prop="courier" label="配送员姓名" width="180"> </el-table-column>
          <el-table-column prop="phoneNum" label="手机号" width="180"> </el-table-column>
          <!--<el-table-column prop="state" label="状态"> </el-table-column>-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit('edit', scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog title="" :visible.sync="addcouriersvisible">
          <el-form ref="form" :model="form" :rules="rules2" label-width="100px">
            <!--<el-form-item label="快递公司" prop="company">-->
              <!--&lt;!&ndash;<el-button size="mini" @click="addlogcouriersvisible = true">添加物流公司</el-button>&ndash;&gt;-->
              <!--<el-radio-group v-model="form.company" >-->
                <!--<el-radio v-for="item in addcompform" :label="item.logcompany"></el-radio>-->
                <!--&lt;!&ndash;<el-radio label="圆通"></el-radio>&ndash;&gt;-->
              <!--</el-radio-group>-->
            <!--</el-form-item>-->
            <el-form-item label="快递员姓名" prop="courier">
              <el-input v-model="form.courier"></el-input>
            </el-form-item>
            <el-form-item label="快递员电话" prop="phoneNum">
              <el-input v-model="form.phoneNum" ></el-input>
            </el-form-item>
            <!--<el-form-item label="快递状态" prop="state">-->
              <!--<el-radio-group v-model="form.state" >-->
                <!--<el-radio label="空闲"></el-radio>-->
                <!--<el-radio label="配送中"></el-radio>-->
              <!--</el-radio-group>-->
            <!--</el-form-item>-->

            <el-form-item>
              <el-button type="primary"  @click="addcourier">{{courierType == 'adds' ? "创建" : "修改"}}</el-button>
              <el-button @click="addcouriersvisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <!--<el-dialog title="" :visible.sync="addlogcouriersvisible">-->
          <!--<el-form ref="compform" :model="compform" label-width="110px">-->
            <!--<el-form-item label="快递公司">-->
              <!--<el-input v-model="compform.logcompany"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="快递公司电话">-->
              <!--<el-input v-model="compform.phoneNum"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-form>-->

          <!--<div slot="footer" class="dialog-footer">-->
            <!--<el-button @click="addlogcouriersvisible = false">取 消</el-button>-->
            <!--<el-button type="primary" @click="addlogcompany2">确 定</el-button>-->
          <!--</div>-->
        <!--</el-dialog>-->

      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
  import axios from "axios"

  export default {
      data() {
        return {
          activeName: '1',
          addcouriersvisible:false,
          addlogcouriersvisible:false,
          tableData:[],
          page:1,
          type:'',
          count:0,
          loading:true,
          courierType:"",
          logcompany:"",
          form:{
            company:"",
            courier:"",
            phoneNum:"",
            state:"",
          },
          rules2:{
            company: [
              { required: true, message: '请选择', trigger: 'change' }
            ],
            courier: [
              { required: true, message: '请输入', trigger: 'blur' }
            ],
            phoneNum:[
              { required: true, message: '请输入' ,trigger: 'blur' },
            ],
            state: [
              { required: true, message: '请选择', trigger: 'change' }
            ],
          },


          dialogFormVisible:false,
          addcompform:[],
          comptype:"",
          compform:{
            logcompany : "",
            phoneNum :""
          },
          rules:{
            logcompany: [
              { required: true, message: '请输入', trigger: 'blur' }
            ],
            phoneNum:[
              { required: true, message: '请输入' ,trigger: 'blur' },
            ],
          },
        };
      },
      mounted(){
        this.getlogcompany()
      },
      methods: {
        handleClick(tab, event){

          if(tab.name == "1"){
            this.getlogcompany()
          }else {
            this.init()
          }
        },
        addcouriers(type){
          this.courierType = type;
          this.addcouriersvisible = true;
          this.form = {
            company:"",
            courier:"",
            phoneNum:"",
            state:"",
          }
        },
        addcourier(){
          //NProgress.start();
          this.$refs.form.validate((valid) => {
            if(valid) {

              if (this.courierType == "adds") {
                axios.post("/logistics/addLogistics", this.form).then((ress) => {
                  let res = ress.data;
                  if (res.status == "0") {
                    this.addcouriersvisible = false;
                    this.init()
                  } else {

                  }
                })
              } else {
                axios.post("/logistics/editLogistics", this.form).then((ress) => {
                  let res = ress.data;
                  if (res.status == "0") {
                    this.addcouriersvisible = false;
                    this.init()
                  } else {

                  }
                })
              }

            }
          })
        },
        init(){
          let param ={
            page:this.page,
            pageSize:10,
            type:this.type,
          }
          axios.get("/logistics/getLogistics",{
            params:param
          }).then((response)=>{
            let res = response.data;
            if (res.status == "0"){
              this.tableData = res.result.list;
              this.count = res.result.count;
              this.loading = false;
            }
          })
        },
        handleEdit(type,row){
          this.courierType = type;
          this.addcouriersvisible = true;
          this.form = {
              company:row.company,
              courier:row.courier,
              phoneNum:row.phoneNum,
              state:row.state,
              id:row._id,
          }
        },
        handleDelete(index,row){
          axios.post("/logistics/delLogistics", {
            id:row._id,
          }).then((response) => {
            let res = response.data;
            if (res.status == "0") {

              this.init()
            }
          })
        },
        addlogcompany2(){

          axios.post("/logistics/editlogcompany", this.compform ).then((ress)=>{
            let res = ress.data;
            if(res.status == "0"){
              this.dialogFormVisible = false;
              this.getlogcompany()
            }else{

            }
          })
        },
        ///////////////////////////////////////////////////////////////
        addcomp(type){
          this.comptype = type;
          this.dialogFormVisible = true;
          this.compform = {
            logcompany :"",
            phoneNum : "",
          }
        },
        getlogcompany(){
          axios.get("/logistics/getlogcompany").then((response)=>{
            let res = response.data;
            if (res.status == "0"){
              this.addcompform = res.result.list;
              this.loading = false;
            }
          })
        },
        addlogcompany(){
          this.$refs.compform.validate((valid) => {
            if (valid) {
              if (this.comptype == "adds") {
                axios.post("/logistics/addlogcompany", this.compform).then((ress) => {
                  let res = ress.data;
                  if (res.status == "0") {
                    this.dialogFormVisible = false;
                    this.getlogcompany()
                  } else {

                  }
                })
              } else {
                axios.post("/logistics/editlogcompany", this.compform).then((ress) => {
                  let res = ress.data;
                  if (res.status == "0") {
                    this.dialogFormVisible = false;
                    this.getlogcompany()
                  } else {

                  }
                })
              }
            }
          })
        },
        editcomp(type,row){
          this.comptype = type;
          this.dialogFormVisible = true;
          this.compform = {
              logcompany : row.logcompany,
              phoneNum : row.phoneNum,
              id:row._id,
          }
        },
        delcomp(index,row){
          axios.post("/logistics/dellogcompany", {
            id:row._id,
          }).then((response) => {
            let res = response.data;
            if (res.status == "0") {
              this.getlogcompany()
            }
          })
        },
      }
    }
</script>

<style  lang="scss"  scoped>
.el-input{
  width: 200px;
}
.el-tabs{
  margin-top: 20px;
}
</style>
